/**
 * loader  1、下载；2、使用（配置loader）
 * plugins 1、下载；2、引入；3、使用。
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // 处理样式资源
      {
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      // 处理图片资源
      // 无法在html中通过src引用图片，只能在css中引入。
      {
        test: /\.(jpg|png|gif)$/,
        // 处理样式文件中的图片url的路径问题的。
        // 需要下载 url-loader 和 file-loader
        loader: 'url-loader',
        options: {
          // 图片小于8kb，就会被base64处理。也就是写入css中。
          // 有点：减少请求数量，减轻服务器压力。
          // 缺点：图片体积会更大，文件请求速度更慢。
          limit: 10 * 1024,
          // html-loader使用commonjs去解析，而url-loader使用es6解析，所以这里需要这样设置。
          esModule: false,
          name: '[hash:10].[ext]',
        },
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片，负责引入图片，然后能被url-loader处理。
        loader: 'html-loader',
      },
    ],
  },
  plugins: [
    // html-webpack-plugin
    // 默认创建一个空的html文件，引入打包输出的所有资源（js/css）
    // 需求：需要有结构额html文件
    new HtmlWebpackPlugin({
      // 复制这个html文件，并且引入打包输出的所有资源（js/css）
      // 也就是上面的loader不要再引入css-loader等等配置了。
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  // mode: 'production',
}
